import React, {Component} from 'react';
import Particles from 'react-tsparticles'

class Loginparticles extends Component {
    render() {
        return (
            <div style={{backgroundImage: "url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595854960829&di=bf9f8c1729ee4bc99530a60b5e11b74d&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F5859f1ef6f939.jpg')",backgroundSize: "cover",overflow:'hidden'}}>
                <Particles
                    options={{
                        fpsLimit: 60,
                        particles: {
                            number: {
                                value: 100,
                                density: {
                                    enable: true,
                                    value_area: 800
                                }
                            },
                            color: {
                                value: "#ffffff",
                            },
                            line_linked: {
                                enable: true,
                                distance: 100,
                                color: "#ffffff",
                                opacity: 0.4,
                                width: 1
                            },
                            collisions: {
                                enable: true,
                            },
                            move: {
                                direction: "none",
                                enable: true,
                                outMode: "bounce",
                                random: false,
                                speed: 6,
                                straight: false,
                            },
                            opacity: {
                                value: 0.5,
                            },
                            shape: {
                                type: "star",
                                stroke: {
                                    width: 0
                                },
                                polygon: {
                                    nb_sides: 5
                                },
                            },
                            size: {
                                random: true,
                                value: 5,
                            },
                            life: {
                                duration: {
                                    sync: false,
                                    value: 3
                                },
                                count: 0,
                                delay: {
                                    random: {
                                        enable: true,
                                        minimumValue: 0.5
                                    },
                                    value: 1
                                }
                            }
                        },
                        interactivity: {
                            detectsOn: "canvas",
                            events: {
                                onClick: {
                                    enable: true,
                                    mode: "push",
                                },
                                onHover: {
                                    enable: true,
                                    mode: "grab",
                                },
                                resize: true,
                            },
                            modes: {
                                bubble: {
                                    distance: 400,
                                    duration: 2,
                                    opacity: 0.8,
                                    size: 40,
                                },
                                push: {
                                    quantity: 4,
                                },
                                repulse: {
                                    distance: 200,
                                    duration: 0.4,
                                },
                                grab: {
                                    distance: 150,
                                    line_linked: {
                                        opacity: 1
                                    }
                                },
                            },
                        },
                        detectRetina: true,
                    }}
                />
            </div>
        );
    }
}

export default Loginparticles;